<template>
  <div class="ol-train">
    <!-- <img :src="'/uploads'+data.thumb"> -->
    <div class="content" @click="toDetail">
      <van-image :src="'/uploads'+data.thumb" lazy-load fit="cover"></van-image>
      <div class="m-back"></div>
      <template v-if="data.degree==1">
        <h4 class="train-name">
          {{data.name}}
          <van-tag color="#ffe1e1" text-color="#fff" size="large" plain>入门</van-tag>
        </h4>
      </template>
      <template v-if="data.degree==2">
        <h4 class="train-name">
          {{data.name}}
          <van-tag color="#ffe1e1" text-color="#07c160" size="large" plain>菜鸟</van-tag>
        </h4>
      </template>
      <template v-if="data.degree==3">
        <h4 class="train-name">
          {{data.name}}
          <van-tag color="#ffe1e1" text-color="#ff0" size="large" plain>进阶</van-tag>
        </h4>
      </template>
      <!-- <h4 class="train-name">{{data.name}}  <van-tag color="#ffe1e1" text-color="#ff0" size="medium" plain>标签</van-tag></h4>  -->
      <p class="train-intro">训练简介: {{data.intro}}</p>
      <p class="train-time">训练时间: {{data.traintime}}</p>
      <p class="train-price">￥{{data.price}}</p>
      <p class="train-hits">练习人数: {{data.hits}} 人</p>
      <p>联系电话: {{data.tel}}</p>
    </div>
    <van-icon @click="addChart" class="add-chart" name="add-o" size="25" color="#fff"></van-icon>
  </div>
</template>

<script>
export default {
  name: 'TrainCard',
  props: {
    data: Object
  },
  methods: {
    toDetail () {
      this.$root.$router.push({
        path: '/traindetail',
        query: {
          id: this.data.id
        }
      })
    },
    addChart () {
      this.$emit('Event', { 'price': this.data.price, 'name': this.data.name, 'count': 1 })
    }
  }
}
</script>

<style scoped>
.ol-train {
  height: 18rem;
  overflow: hidden;
  position: relative;
}

.content > p:nth-of-type(3) {
  top: 5rem;
  left: 75%;
  /* color: rgb(255, 0, 0); */
  color: gold;
  font-weight: 600;
  font-size: 1.4rem;
  width: 24%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  position: relative;
}
.content > p,
h4 {
  color: white;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 1rem;
}
.van-image {
  height: 18rem;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.m-back {
  position: absolute;
  height: 18rem;
  width: 100%;
  background-color: #4e5153a2;
  top: 0;
  border-radius: 10px;
}
.train-name {
  top: 2rem;
  font-size: 1.6rem;
  font-weight: 500;
}
.train-intro {
  width: 65%;
  height: 3.8rem;
  top: 7rem;
  line-height: 1.9rem;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.train-time {
  top: 11rem;
}
.train-hits {
  top: 13rem;
  font-size: 0.9rem;
}
.content > p:last-of-type {
  bottom: 2rem;
}
.add-chart {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
</style>
